<template>
  <view class="wrap">
    <uv-navbar leftText="" fixed :title="`社群成员(${total})`" safeAreaInsetTop placeholder autoBack bgColor='#FFF' leftIconColor='#333' :titleStyle="{color: '#333'}"></uv-navbar>
    <view class="bigTitle">群主、合伙人、嘉宾</view>
    <view class="people noBorder">
      <view class="item" v-for="(item,index) in base.order" :key='index' @click="goUser(item)">
        <view class="avatar">
          <image :src='setUrl(item.avatar)' mode="aspectFill" class="img" v-if="item.avatar"></image>
          <image src="../../../static/logo.png" mode="aspectFill" class="img" v-else></image>
        </view>
        <view class="center">
          <view class="title">{{ item.nickname }} <text class="tag" :class="peopleColor[item.identity]">{{peopleType[item.identity]}}</text></view>
        </view>
        <view class="right" v-if="body.member_info && body.member_info.identity == 1 && item.identity != 1" @click.stop="remove(item)">
          <uv-icon name="/static/removePeople.png" width="28rpx" height="28rpx" label='移除' labelSize='28rpx' labelColor='#999999' space='4rpx'></uv-icon>
        </view>
      </view>
    </view>
    <template v-if="base.people.length">
      <view class="bigTitle">成员</view>
      <view class="people noBorder">
        <view class="item" v-for="(item,index) in base.people" :key='index' @click="goUser(item)">
          <view class="avatar">
            <image :src='setUrl(item.avatar)' mode="aspectFill" class="img" v-if="item.avatar"></image>
            <image src="../../../static/logo.png" mode="aspectFill" class="img" v-else></image>
          </view>
          <view class="center">
            <view class="title">{{ item.nickname }}</view>
          </view>
          <view class="right" v-if="body.member_info && body.member_info.identity == 1" @click.stop="remove(item)">
            <uv-icon name="/static/removePeople.png" width="28rpx" height="28rpx" label='移除' labelSize='28rpx' labelColor='#999999' space='4rpx'></uv-icon>
          </view>
        </view>
      </view>
    </template>
    
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useOrder } from '@/store';
import { onShow } from '@dcloudio/uni-app';
import { post } from '@/api';
import { setUrl } from '@/common';

const peopleType = { 1: '群主', 2: '合伙人', 3: '嘉宾' };
const peopleColor = { 1: 'red', 2: 'yellow', 3: 'blue' };
let base = ref({
  order: [],
  people: []
});
let total = ref(0);

const store = useOrder();
const body = ref(uni.$uv.deepClone(store.group));
console.log(body);

onShow(() => {
  getList();
})

function getList(){
  function sortId(a,b){
    return a.identity.identity  
  }
  const params = {
    page: 1,
    limit: 500,
    association_id: body.value.id
  }
  let user1 = [];
  let user2 = [];
  post('api/association_member/getAssociationMemberList', params).then(res => {
    if(res.code == 1){
      const { data } = res.data;
      total.value = res.data.total;
      data.forEach(e => {
        if(e.identity != 4) user1.push(e);
        else user2.push(e);
      })
      user1.sort(sortId);
      base.value.order = user1;
      base.value.people = user2;
    }
  })
}
function goUser(row){
  uni.navigateTo({
    url: `/pages/mine/myTheme/index?id=${row.user_id}`
  });
}
function remove(row){
  uni.navigateTo({
    url: `/pages/group/setting/remove?id=${row.user_id}`
  });
}
</script>

<style lang="scss" scoped>
  .people{
    padding: 0 30rpx;
    padding-top: 40rpx;
    .item{
      width: 100%;
      display: flex;
      align-items: center;
      margin-bottom: 50rpx;
      .avatar{
        width: 70rpx;
        height: 70rpx;
        overflow: hidden;
        border-radius: 50%;
      }
    }
  }
  .center{
    padding-left: 20rpx;
    padding-right: 20rpx;
    flex: 1;
    width: 0;
    .title{
      font-weight: 400;
      font-size: 32rpx;
      color: #2B2B2B;
      padding-bottom: 8rpx;
      .tag{
        height: 32rpx;
        line-height: 32rpx;
        border-radius: 32rpx;
        padding: 0 12rpx;
        color: #FFFFFF;
        font-weight: 400;
        font-size: 20rpx;
        margin-left: 8rpx;
        &.red{
          background-color: #E43222;
        }
        &.yellow{
          background-color: #F0BA16;
        }
        &.blue{
          background-color: #465B89;
        }
      }
    }
  }
  .bigTitle{
    font-weight: 500;
    font-size: 28rpx;
    color: #737373;
    padding: 25rpx 30rpx;
    background-color: #F5F5F5;
  }
  .wrap{
    min-height: 100vh;
    background-color: #fff;
  }
  .menberPopup{
    background-image: url();
  }
</style>